import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import {
  Select,
  Button,
  Table,
  Input,
  DatePicker,
  TreeSelect,
  Modal,
  message,
  Popover,
  Drawer,
  Image,
  Radio,
  InputNumber,
} from "antd";
import {
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  SearchOutlined,
  CopyOutlined,
  ExclamationCircleFilled,
  SyncOutlined,
  CloseOutlined,
  DollarOutlined,
  FileExcelOutlined,
} from "@ant-design/icons";
import {
  text_check,
  post_axios,
  get_interval_date,
  add_zero,
  key_find_obj,
  key_find_check_value,
  show_img_url,
  format_time,
  order_status_list,
  status_code_list,
} from "../../utils";
import dayjs from "dayjs";
import customParseFormat from "dayjs/plugin/customParseFormat";
import videojs from "video.js";
import VideoJS from "../../modules/videoJs";
import Clipboard from "clipboard";
import "./index.scss";

export default function SaleFlow(props) {
  dayjs.extend(customParseFormat);
  const { t } = useTranslation();
  const { Option } = Select;
  const { confirm } = Modal;
  const { RangePicker } = DatePicker;
  const [tableHeight, setTableHeight] = useState(0);
  const { actions, setSpinning } = props;
  let { menu_action, user_power_lang, username, user_grade } = actions;
  user_power_lang = JSON.parse(user_power_lang);

  // 国内国外判断
  const session_company = sessionStorage.getItem("company");
  let localStorage_company = JSON.parse(localStorage.getItem("choose_company"));
  const local_company_object =
    localStorage_company &&
    localStorage_company[username] &&
    localStorage_company[username]
      ? localStorage_company[username]
      : "";
  let today_time = new Date();
  let year = today_time.getFullYear();
  let month = add_zero(today_time.getMonth() + 1);
  let day = add_zero(today_time.getDate());

  let last_time = new Date(get_interval_date(-7, "-"));
  let last_year = last_time.getFullYear();
  let last_month = add_zero(last_time.getMonth() + 1);
  let last_day = add_zero(last_time.getDate());

  const time_disabled = (current, partial, info) => {
    return current && current > dayjs().endOf("day");
  };

  const [page, setPage] = useState(1);
  const [rows, setRows] = useState(20);
  const [total, setTotal] = useState(0);
  const [com_ids_par, setCom_ids_par] = useState([]);
  const [mch_ids_par, setMch_ids_par] = useState([]);
  const [project_ids_par, setProject_ids_par] = useState([]);
  const [point_ids_par, setPoint_ids_par] = useState([]);
  const [subject_type, setSubject_type] = useState("");
  const [subject_status, setSubject_status] = useState("");
  const [subject_pay_type, setSubject_pay_type] = useState("");
  const [screen_ipt_type, setScreen_ipt_type] = useState("avm");
  const [screen_ipt_value, setScreen_ipt_value] = useState("");
  const [date_stamp, setDate_stamp] = useState([
    `${last_year}-${last_month}-${last_day}`,
    `${year}-${month}-${day}`,
  ]);
  const [tableList, setTableList] = useState([]);

  const getData = async (newPage, newRows) => {
    let upMsg = {
      page: newPage ? newPage : page,
      rows: newRows ? newRows : rows,
      company_id: local_company_object.id,
      company: local_company_object.company,
      bdate: date_stamp[0] + " 00:00:00",
      edate: date_stamp[1] + " 23:59:59",
      year: date_stamp[0].split("-")[0],
      com_ids_par: com_ids_par,
      mch_ids_par: mch_ids_par,
      project_ids_par: project_ids_par,
      point_ids_par: point_ids_par,
      avm_s: screen_ipt_type == "avm" ? screen_ipt_value : "",
      trade_no_mch: screen_ipt_type == "trade_no_mch" ? screen_ipt_value : "",
      trade_no_pay: screen_ipt_type == "trade_no_pay" ? screen_ipt_value : "",
      subject_type: subject_type,
      subject_status: subject_status,
      subject_pay_type: subject_pay_type,
    };
    setSpinning(true);
    let res = await post_axios("sale_flow", "m_query", upMsg);
    setSpinning(false);
    if (!res) return;
    setTableList(res.data_rows.rows);
    setTotal(res.data_rows.total);
  };
  const columns = [
    {
      dataIndex: "idx",
      align: "center",
      width: 40,
      render: (_, record, index) => <>{index + 1}</>,
    },
    {
      title: t("transaction_flow.avm"),
      align: "center",
      children: [
        {
          title: t("transaction_flow.avmID"),
          align: "center",
          render: (_, record) => (
            <div>
              <div>{record.avm}</div>
              <div>{record.avmID}</div>
            </div>
          ),
        },
      ],
    },
    {
      title: t("transaction_flow.project"),
      align: "center",
      children: [
        {
          title: t("transaction_flow.point"),
          align: "center",
          render: (_, record) => (
            <div>
              <div>{record.project}</div>
              <div>{record.point}</div>
            </div>
          ),
        },
      ],
    },
    {
      title: t("transaction_flow.subject_type"),
      align: "center",
      dataIndex: "subject_type",
    },
    {
      title: t("transaction_flow.subject_pay_type"),
      align: "center",
      render: (_, record) => (
        <div>
          {text_check(
            key_find_obj(record.subject_pay_type, pay_type_list, "flag")
          )}
        </div>
      ),
    },
    {
      title: "手机号",
      align: "center",
      dataIndex: "user_tel",
    },
    {
      title: t("transaction_flow.subject_status"),
      align: "center",
      children: [
        {
          title: t("transaction_flow.subject_status_sub"),
          align: "center",
          render: (_, record) => (
            <div>
              <div>
                {key_find_check_value(
                  record.subject_status,
                  order_status_list,
                  "key"
                )}
              </div>
              <div>
                {key_find_check_value(
                  record.subject_status_sub,
                  order_status_list,
                  "key"
                )}
              </div>
            </div>
          ),
        },
      ],
    },
    {
      title: t("transaction_flow.subject"),
      align: "center",
      children: [
        {
          title: t("transaction_flow.trade_no_pay"),
          align: "center",
          ellipsis: true,
          width: 180,
          render: (_, record) => (
            <div>
              <div>
                <Popover
                  placement="right"
                  title=""
                  content={
                    <div className="copy_no_style copy_tag">
                      {record.subject}
                    </div>
                  }
                >
                  {record.subject.substring(0, 10)}...
                </Popover>
              </div>
              <div>
                <Popover
                  placement="right"
                  title=""
                  content={
                    <div
                      className="copy_no_style copy_tag"
                      data-clipboard-text={record.trade_no_pay}
                      onClick={() => copy_click(record.trade_no_pay)}
                    >
                      {record.trade_no_pay}
                      <CopyOutlined />
                    </div>
                  }
                >
                  <div>
                    {record.trade_no_pay.substring(0, 6)} ****
                    {record.trade_no_pay.substring(
                      record.trade_no_pay.length - 10,
                      record.trade_no_pay.length
                    )}
                  </div>
                </Popover>
              </div>
            </div>
          ),
        },
      ],
    },
    {
      title: t("transaction_flow.price"),
      align: "center",
      render: (_, record) => (
        <div>
          {record.price_dis_pay == 0 || record.price_dis_pay == record.price ? (
            <div>{(record.price / 100).toFixed(2)}</div>
          ) : (
            <>
              <div style={{ textDecoration: "line-through" }}>
                {(record.price / 100).toFixed(2)}
              </div>
              <div>{(record.price_dis_pay / 100).toFixed(2)}</div>
            </>
          )}
        </div>
      ),
    },
    {
      title: t("transaction_flow.trade_no_mch"),
      align: "center",
      children: [
        {
          title: t("transaction_flow.trade_no_mch_sub"),
          align: "center",
          ellipsis: true,
          width: 180,
          render: (_, record) => (
            <div>
              <div>
                <Popover
                  placement="right"
                  title=""
                  content={
                    <div
                      className="copy_no_style copy_tag"
                      data-clipboard-text={record.trade_no_mch}
                      onClick={() => copy_click(record.trade_no_mch)}
                    >
                      {record.trade_no_mch}
                      <CopyOutlined />
                    </div>
                  }
                >
                  <div>
                    {record.trade_no_mch.substring(0, 6)} ****
                    {record.trade_no_mch.substring(
                      record.trade_no_mch.length - 10,
                      record.trade_no_mch.length
                    )}
                  </div>
                </Popover>
              </div>
              <div>
                <Popover
                  placement="right"
                  title=""
                  content={
                    <div
                      className="copy_no_style copy_tag"
                      data-clipboard-text={record.trade_no_mch_sub}
                      onClick={() => copy_click(record.trade_no_mch_sub)}
                    >
                      {record.trade_no_mch_sub}
                      <CopyOutlined />
                    </div>
                  }
                >
                  <div>
                    {record.trade_no_mch_sub.substring(0, 6)} ****
                    {record.trade_no_mch_sub.substring(
                      record.trade_no_mch_sub.length - 10,
                      record.trade_no_mch_sub.length
                    )}
                  </div>
                </Popover>
              </div>
            </div>
          ),
        },
      ],
    },
    {
      title: t("transaction_flow.time"),
      align: "center",
      dataIndex: "pay_stamp",
    },
    {
      title: t("transaction_flow.price"),
      align: "center",
      width: 230,
      render: (_, record) => (
        <div>
          {menu_action.indexOf("m_repair") > -1 ? (
            <Button
              size="small"
              type="primary"
              onClick={() => repair_order(record)}
            >
              {text_check(user_power_lang["m_repair"])}
            </Button>
          ) : (
            ""
          )}
          {menu_action.indexOf("m_refund") > -1 ? (
            <Button
              size="small"
              danger
              onClick={() => refund_payment(record)}
              style={{ margin: "0 10px" }}
            >
              {text_check(user_power_lang["m_refund"])}
            </Button>
          ) : (
            ""
          )}
          <Button size="small" onClick={() => get_detail_func(record)}>
            {t("transaction_flow.view_details")}
          </Button>
        </div>
      ),
    },
  ];

  // 分页器
  const pageOnChange = async (page, pageSize) => {
    setPage(page);
    setRows(pageSize);
    initData(page, pageSize);
  };

  // 用户数据行点击
  const [clickRowKey, setClickRowKey] = useState("");
  const [clickRow, setclickRow] = useState({});

  const tableRowClick = (row) => {
    setClickRowKey(row.trade_no_all);
    setclickRow(row);
  };

  const search_data = () => {
    setPage(1);
    initData(1);
  };

  const initData = (page, rows) => {
    setClickRowKey("");
    setclickRow([]);
    getData(page, rows);
  };

  // 点击查看详情
  const [order_detail_show, setOrder_detail_show] = useState(false);
  const [order_detail_msg, setOrder_detail_msg] = useState({});
  const get_detail_func = async (value) => {
    console.log(value);
    let upMsg = {
      company_id: local_company_object.id,
      company: local_company_object.company,
      bdate: date_stamp[0] + " 00:00:00",
      edate: date_stamp[1] + " 23:59:59",
      year: date_stamp[0].split("-")[0],
      trade_no_mch_sub: value.trade_no_mch_sub,
    };
    let res = await post_axios("sale_flow", "m_query", upMsg);
    if (!res) return;
    const newObj = res.data_rows.rows[0];
    newObj["attach"] =
      newObj["attach"] == ""
        ? { vision_type: "" }
        : JSON.parse(newObj["attach"]);
    setOrder_detail_msg(newObj);
    setOrder_detail_show(true);
  };

  const [mp4_video_drawer_show, setMp4_video_drawer_show] = useState(false);
  const [m3u8_video_drawer_show, setM3u8_video_drawer_show] = useState(false);
  const [m3u8_arr, setM3u8_arr] = useState([]);
  const [mp4_arr, setMp4_arr] = useState([]);
  const [video_obj, setVideo_obj] = useState({});

  const playerRef = React.useRef(null);
  const videoJsOptions = (src) => {
    return {
      autoplay: true,
      controls: true,
      responsive: true,
      fluid: true,
      sources: [
        {
          src,
          type: "application/x-mpegURL",
        },
      ],
    };
  };

  const handlePlayerReady = (player) => {
    playerRef.current = player;

    // You can handle player events here, for example:
    player.on("waiting", () => {
      videojs.log("player is waiting");
    });

    player.on("dispose", () => {
      videojs.log("player will dispose");
    });
  };
  const get_order_video = async () => {
    let upMsg = {
      company_id: local_company_object.id,
      company: local_company_object.company,
      avm: order_detail_msg.avm,
      out_trade_no: order_detail_msg.trade_no_mch,
      trade_no_all: order_detail_msg.trade_no_all,
    };
    let res = await post_axios(
      "trade_video",
      order_detail_msg["attach"].vision_type,
      upMsg
    );
    if (!res) return;
    let rows = res.data_rows.rows;
    if (typeof rows !== "object" || rows.length == 0) {
      alert("视频错误");
      return;
    }
    if (order_detail_msg["attach"].vision_type == "cloud_walk") {
      console.log("m3u8");
      setM3u8_video_drawer_show(true);
      setM3u8_arr(rows);
    } else {
      console.log("mp4");
      setMp4_video_drawer_show(true);
      setMp4_arr(rows);
      rows.forEach((ele) => {
        const newVideoObj = JSON.parse(JSON.stringify(video_obj));
        newVideoObj[ele.camera] = ele;
        setVideo_obj(newVideoObj);
      });
    }
  };

  // 关闭订单
  const [close_order_show, setClose_order_show] = useState(false);
  const [close_appid, setClose_appid] = useState("");
  const [close_out_trade_no, setClose_out_trade_no] = useState("");
  const [close_merchant_id, setClose_merchant_id] = useState("");
  const close_order = async () => {
    setClose_order_show(true);
  };
  const close_order_confirm = async () => {
    if (
      close_appid === "" ||
      close_out_trade_no === "" ||
      close_merchant_id === ""
    ) {
      message.warning({
        content: t("transaction_flow.msg_lack"),
      });
      return;
    }
    let upMsg = {
      company_id: local_company_object.id,
      company: local_company_object.company,
      appid: close_appid,
      out_trade_no: close_out_trade_no,
      merchant_id: close_merchant_id,
    };
    let res = await post_axios("sale_flow", "m_close", upMsg);
    if (!res) return;
    message.success({
      content: t("common.success"),
    });
  };

  // 创建补缴订单
  const [avm_kind_product_list, setAvm_kind_product_list] = useState([]);
  const [checked_product_list, setChecked_product_list] = useState([]);
  const [
    create_supplementary_payment_show,
    setCreate_supplementary_payment_show,
  ] = useState(false);
  const [order_amount, setOrder_amount] = useState(0);
  const [supplementary_payment_notes, setSupplementary_payment_notes] =
    useState("");
  const create_supplementary_payment = async () => {
    if (clickRowKey === "") {
      message.warning({
        content: t("transaction_flow.select_a_order"),
      });
      return;
    }
    let upMsg = {
      company_id: local_company_object.id,
      company: local_company_object.company,
      avm: clickRow.avm,
    };
    let res = await post_axios("supplementary", "m_query_goods", upMsg);
    if (!res) return;
    const newList = res.data_rows.rows.map((item) => {
      item["price"] = item["price"] / 100;
      item["pic"] = show_img_url(item, local_company_object.company);
      return item;
    });
    setAvm_kind_product_list(newList);
    setChecked_product_list([]);
    setOrder_amount(0);
    setSupplementary_payment_notes("");
    setCreate_supplementary_payment_show(true);
  };

  const product_click_func = (obj) => {
    obj["checked_num"] = 1;
    setChecked_product_list([...checked_product_list, obj]);
    const newList = avm_kind_product_list.filter(
      (item) => item.barcode !== obj.barcode
    );
    setAvm_kind_product_list(newList);
    count_order_number([...checked_product_list, obj]);
  };
  const delete_checked_product = (obj) => {
    setAvm_kind_product_list([...avm_kind_product_list, obj]);
    const newList = checked_product_list.filter(
      (item) => item.barcode !== obj.barcode
    );
    setChecked_product_list(newList);
    count_order_number(newList);
  };

  const InputNumberonChange = (value, index) => {
    const newList = checked_product_list;
    newList[index]["checked_num"] = value;
    setChecked_product_list(newList);
    count_order_number(newList);
  };
  const count_order_number = (checked_product_list) => {
    let amount = checked_product_list.reduce((sum, currentValue) => {
      return (sum +=
        Number(currentValue.price) * 100 * currentValue.checked_num);
    }, 0);
    setOrder_amount(amount / 100);
  };

  const create_supplementary_payment_confirm = async () => {
    let array_goods = checked_product_list.map((item) => {
      return {
        goods_id: item.barcode,
        goods_name: item.name,
        goods_price: Number(item.price) * 10 * 10,
        goods_count: item.checked_num,
        goods_amount: Number(item.price) * 10 * 10 * item.checked_num,
      };
    });
    let upMsg = {
      ...clickRow,
      company_id: local_company_object.id,
      company: local_company_object.company,
      price: order_amount * 10 * 10,
      array_goods,
    };
    let res = await post_axios("customer_complaint", "m_complete_order", upMsg);
    if (!res) return;
    message.warning({
      content: t("common.success"),
    });
    setCreate_supplementary_payment_show(false);
    search_data();
  };

  // 重新提交订单商品
  const [repair_avm_kind_product_list, setRepair_avm_kind_product_list] =
    useState([]);
  const [original_avm_kind_product_list, setOriginal_avm_kind_product_list] =
    useState([]);
  const [repair_type, setRepair_type] = useState();
  const [order_checked_product_list, setOrder_checked_product_list] = useState(
    []
  );
  const [repair_order_show, setRepair_order_show] = useState(false);
  const [repair_order_amount, setRepair_order_amount] = useState(0);
  const repair_order = async (type) => {
    if (type !== "whole") {
      tableRowClick(type);
    }
    if (clickRowKey === "") {
      message.warning({
        content: t("transaction_flow.select_a_order"),
      });
      return;
    }
    await get_machine_goods();

    setRepair_type(type);
    setOrder_checked_product_list([]);
    setRepair_order_amount(0);
    setRepair_order_show(true);
  };
  const get_machine_goods = async () => {
    let upMsg = {
      company_id: local_company_object.id,
      company: local_company_object.company,
      avm: clickRow.avm,
    };
    let res = await post_axios("supplementary", "m_query_goods", upMsg);
    if (!res) return;
    let rows = res.data_rows.rows.map((item) => {
      item["price"] = item["price"] / 100;
      item["show_pic"] = show_img_url(item, local_company_object.company);
      return item;
    });
    setRepair_avm_kind_product_list(rows);
    setOriginal_avm_kind_product_list(rows);
  };
  const get_updataed_goods = async () => {
    let upMsg = {
      company_id: local_company_object.id,
      company: local_company_object.company,
      bdate: date_stamp[0] + " 00:00:00",
      edate: date_stamp[1] + " 23:59:59",
      year: date_stamp[0].split("-")[0],
      trade_no_mch: clickRow.trade_no_mch,
      with_goods: "enable",
    };
    let res = await post_axios("sale_flow", "m_query", upMsg);
    if (!res) return;
    console.log(res.data_rows.rows);
    setOrder_checked_product_list(res.data_rows.rows);
  };
  const repair_order_product_click_func = (obj) => {
    obj["checked_num"] = 1;
    if (repair_type.value == "whole") {
      // 整笔纠正
      const checkedList = JSON.parse(
        JSON.stringify(order_checked_product_list)
      );
      checkedList.push(obj);
      setOrder_checked_product_list(checkedList);

      const repairList = repair_avm_kind_product_list.filter(
        (item) => item.barcode !== obj.barcode
      );
      setRepair_avm_kind_product_list(repairList);
      repair_order_count_order_number(checkedList);
    } else {
      setOrder_checked_product_list([obj]);
      const newList = original_avm_kind_product_list.filter(
        (item) => item.barcode !== obj.barcode
      );
      setRepair_avm_kind_product_list(newList);
      repair_order_count_order_number([obj]);
    }
  };
  const repair_delete_checked_product = (obj) => {
    const repairList = JSON.parse(JSON.stringify(repair_avm_kind_product_list));
    repairList.push(obj);
    setRepair_avm_kind_product_list(repairList);

    const checkedList = order_checked_product_list.filter(
      (item) => item.barcode !== obj.barcode
    );
    setOrder_checked_product_list(checkedList);
    repair_order_count_order_number(checkedList);
  };

  const repairOrderInputNumberonChange = (value, index) => {
    const newList = order_checked_product_list;
    newList[index]["checked_num"] = value;
    setOrder_checked_product_list(newList);
    repair_order_count_order_number(newList);
  };

  const repair_order_count_order_number = (rows) => {
    let amount = rows.reduce((sum, currentValue) => {
      return (sum +=
        Number(currentValue.price) * 100 * currentValue.checked_num);
    }, 0);
    setRepair_order_amount(amount / 100);
  };

  const repair_order_confirm = async () => {
    let goods = order_checked_product_list.map((item) => {
      return {
        goods_id: item.barcode,
        goods_name: item.name,
        goods_price: Number(item.price) * 10 * 10,
        goods_count: item.checked_num,
        goods_amount: Number(item.price) * 10 * 10 * item.checked_num,
      };
    });
    let upMsg = Object.assign(clickRow, {
      company_id: local_company_object.id,
      company: local_company_object.company,
      amount: repair_order_amount * 10 * 10,
      correct_area: repair_type == "whole" ? "all" : "",
      goods,
    });
    let res = await post_axios("order_repair", "m_repair", upMsg);
    if (!res) return;
    message.success({
      content: t("common.success"),
    });
    setRepair_order_show(false);
    search_data();
  };

  // 撤销补缴订单
  const revoke_close_order = async () => {
    if (clickRowKey === "") {
      message.warning({
        content: t("transaction_flow.select_a_order"),
      });
      return;
    }
    let upMsg = {
      company_id: local_company_object.id,
      company: local_company_object.company,
      out_trade_no: clickRow.trade_no_mch,
      pay_type: clickRow.subject_pay_type,
      avm: clickRow.avm,
    };
    let res = await post_axios("supplementary", "m_close_order", upMsg);
    if (!res) return;
    message.success({
      content: t("common.success"),
    });
    search_data();
  };
  // 退款
  const [refund_payment_show, setRefund_payment_show] = useState(false);
  const [refund_payment_all_bool, setRefund_payment_all_bool] = useState("");
  const refund_payment = async (value) => {
    if (value === "whole" && clickRowKey === "") {
      message.warning({
        content: t("transaction_flow.select_a_order"),
      });
      return;
    }
    let text =
      value === "whole" ? (
        <div>
          是否确认对订单<strong>{clickRow.trade_no_mch}</strong>进行整笔退款？
        </div>
      ) : (
        <div>
          是否确认对商品<strong>{value.subject}</strong>进行单独退款？
        </div>
      );
    confirm({
      title: "提示",
      icon: <ExclamationCircleFilled />,
      content: text,
      onOk: async () => {
        let useStateund_area = value === "whole" ? "all" : "single";

        let upMsg = Object.assign(clickRow, {
          company_id: local_company_object.id,
          company: local_company_object.company,
          useStateund_area,
        });
        let res = await post_axios("useStateund/test", "useStateund", upMsg);
        if (!res) return;
        message.success({
          content: t("common.success"),
        });
        search_data();
        setRefund_payment_show(false);
      },
      onCancel() {
        console.log("Cancel");
      },
    });
  };
  const refund_payment_func = async () => {
    if (refund_payment_all_bool === "") {
      message.warning({
        content: "请选择一种退款模式",
      });
      return;
    }
    let upMsg = {
      company_id: local_company_object.id,
      company: local_company_object.company,
      out_request_no: clickRow.trade_no_mch,
      trade_no_mch_sub: clickRow.trade_no_mch_sub,
      trade_no_pay: clickRow.trade_no_pay,
      price: clickRow.price,
      avm: clickRow.avm,
      flog: refund_payment_all_bool,
    };
    let res = await post_axios("useStateund/test", "useStateund", upMsg);
    if (!res) return;
    message.success({
      content: t("common.success"),
    });
    search_data();
    setRefund_payment_show(false);
  };
  // 一键复制
  const copy_click = (value) => {
    let clipboard = new Clipboard(".copy_tag");
    clipboard.on("success", (e) => {
      message.warning({
        content: t("common.copy_success"),
        type: "success",
      });
      clipboard.destroy(); // 释放内存
    });
    clipboard.on("error", (e) => {
      message.warning({
        content: t("common.copy_fail"),
      });
      clipboard.destroy(); // 释放内存
    });
  };

  // 导出
  const [export_data_show, setExport_data_show] = useState(false);
  const [export_ranks_list, setExport_ranks_list] = useState([]);
  const export_data = async () => {
    await get_export_ranks_data();
    setExport_data_show(true);
  };
  const get_export_ranks_data = async () => {
    let upMsg = {
      company_id: local_company_object.id,
      company: local_company_object.company,
      down_type: "Transaction History",
    };
    setSpinning(true);
    let res = await post_axios("task_export", "m_query", upMsg);
    setSpinning(false);
    if (!res) return;
    setExport_ranks_list(res.data_rows.rows);
  };

  const add_export_ranks = async () => {
    let upMsg = {
      company_id: local_company_object.id,
      company: local_company_object.company,
      bdate: date_stamp[0] + " 00:00:00",
      edate: date_stamp[1] + " 23:59:59",
      year: date_stamp[0].split("-")[0],
      com_ids_par: com_ids_par,
      mch_ids_par: mch_ids_par,
      project_ids_par: project_ids_par,
      point_ids_par: point_ids_par,
      avm_s: screen_ipt_type == "avm" ? screen_ipt_value : "",
      trade_no_mch: screen_ipt_type == "trade_no_mch" ? screen_ipt_value : "",
      trade_no_pay: screen_ipt_type == "trade_no_pay" ? screen_ipt_value : "",
      subject_type: subject_type,
      subject_status: subject_status,
      subject_pay_type: subject_pay_type,
    };
    setSpinning(true);
    let res = await post_axios("sale_flow", "m_export", upMsg);
    setSpinning(false);
    if (!res) return;
    get_export_ranks_data();
  };
  const download_export_data = (item) => {
    window.open(item.export_url);
  };
  const delete_export_data = async (item) => {
    let upMsg = {
      company_id: local_company_object.id,
      company: local_company_object.company,
      id: item.id,
      export_name: item.export_name,
    };
    setSpinning(true);
    let res = await post_axios("task_export", "m_del", upMsg);
    if (!res) return;
    setSpinning(false);
    message.warning({
      content: t("common.delete_success"),
    });
    get_export_ranks_data();
  };

  const exportRanksColumns = [
    {
      dataIndex: "idx",
      align: "center",
      width: 40,
      render: (_, record, index) => <>{index + 1}</>,
    },
    {
      title: t("operate.time"),
      align: "center",
      render: (_, record) => (
        <>{record.op_time ? format_time(record.op_time, "type_s") : ""}</>
      ),
    },
    {
      title: t("transaction_flow.file_name"),
      align: "center",
      width: 300,
      dataIndex: "export_name",
    },
    {
      title: t("transaction_flow.status"),
      align: "center",
      render: (_, record) => (
        <>{text_check(status_code_list[record.status_code])}</>
      ),
    },
    {
      title: t("transaction_flow.operation"),
      align: "center",
      render: (_, record) => (
        <>
          <Button
            size="small"
            type="primary"
            style={{
              marginRight: "10px",
            }}
            onClick={() => download_export_data(record)}
            disabled={record.status_code !== "Success"}
          >
            {t("transaction_flow.download")}
          </Button>
          <Button
            size="small"
            type="primary"
            danger
            onClick={() => delete_export_data(record)}
          >
            {t("transaction_flow.delete")}
          </Button>
        </>
      ),
    },
  ];

  // 获取组织列表
  const [com_list, setCom_list] = useState([]);
  const get_com_data = async () => {
    let upMsg = {
      company_id: local_company_object.id,
      company: local_company_object.company,
      op_type: "list_com_id",
    };
    let res = await post_axios("admin_oneself", "m_query", upMsg);
    if (!res) return;
    setCom_list(res.data_rows.rows);
  };

  // 筛选_获取商户列表
  const [mch_page, setMch_page] = useState(1);
  const [mch_list, setMch_list] = useState([]);
  const get_mch_data = async (newPage) => {
    let upMsg = {
      page: newPage ? newPage : mch_page,
      rows: 20,
      company_id: local_company_object.id,
      company: local_company_object.company,
      op_type: "list_mch",
    };
    let res = await post_axios("admin_oneself", "m_query", upMsg);
    if (!res) return;
    const receiveRows = res.data_rows.rows;
    setMch_list([...mch_list, ...receiveRows]);
  };
  // 商户筛选框-分页
  const mch_next_page = () => {
    setMch_page(mch_page + 1);
    get_mch_data(mch_page + 1);
  };

  // 筛选_获取项目列表
  const [project_page, setProject_page] = useState(1);
  const [project_rows, setProject_rows] = useState(20);
  const [project_list, setProject_list] = useState([]);
  const get_project_data = async (newPage) => {
    let upMsg = {
      page: newPage ? newPage : project_page,
      rows: project_rows,
      company_id: local_company_object.id,
      company: local_company_object.company,
      op_type: "list_project",
    };
    let res = await post_axios("admin_oneself", "m_query", upMsg);
    if (!res) return;
    setProject_list(res.data_rows.rows);
  };
  const project_next_page = () => {
    setProject_page(project_page + 1);
    setProject_ids_par([]);
    get_project_data(project_page + 1);
  };

  // 筛选_获取点位列表
  const [point_page, setPoint_page] = useState(1);
  const [point_list, setPoint_list] = useState([]);
  const get_point_data = async (newPage) => {
    let upMsg = {
      page: newPage ? newPage : point_page,
      rows: 20,
      company_id: local_company_object.id,
      company: local_company_object.company,
      op_type: "list_point",
    };
    let res = await post_axios("admin_oneself", "m_query", upMsg);
    if (!res) return;
    setPoint_list(res.data_rows.rows);
  };
  const point_next_page = () => {
    setPoint_page(point_page + 1);
    setPoint_ids_par([]);
    get_point_data(point_page + 1);
  };

  // 筛选_获取支付方式列表
  const [pay_type_list, setPay_type_list] = useState([]);
  const get_pay_type_data = async () => {
    let upMsg = {
      company_id: local_company_object.id,
      company: local_company_object.company,
      op_type: "list_pay_type",
    };
    let res = await post_axios("admin_oneself", "m_query", upMsg);
    if (!res) return;
    let rows = res.data_rows.rows.filter((item) => {
      return item.flag.substring(0, 1) !== "9";
    });
    setPay_type_list([{ flag: "", msg_cn: "全部", msg_en: "ALL" }, ...rows]);
  };

  // 筛选_获取支付方式列表
  const [sale_flow_status_list, setSale_flow_status_list] = useState([]);
  const get_sale_flow_status_data = async () => {
    let upMsg = {
      company_id: local_company_object.id,
      company: local_company_object.company,
      dict_type: "sale_flow_status",
    };
    let res = await post_axios("dict", "query", upMsg);
    if (!res) return;
    let rows = res.data_rows.rows;
    setSale_flow_status_list(rows);
  };

  useEffect(() => {
    // 挂载后或者更新后的操作
    getData().then(() => {
      const tabBoxHeight =
        document.getElementsByClassName("sale_flow")[0].scrollHeight;
      const tableHeight = tabBoxHeight - 136 - 70;
      setTableHeight(tableHeight);
    });
    if (user_grade < 70) {
      get_com_data();
    }
    get_mch_data();
    get_project_data();
    get_point_data();
    get_pay_type_data();
    get_sale_flow_status_data();
  }, []);
  return (
    <>
      <div className="sale_flow modules">
        <div className="screen_ipt" style={{ height: "80px" }}>
          {user_grade < 70 ? (
            <div className="ipt_box ipt_box_long">
              <div className="ipt_box_title">{t("market.organization")}</div>
              <TreeSelect
                value={com_ids_par}
                treeData={com_list}
                allowClear={true}
                size="small"
                multiple
                treeCheckStrictly={true}
                fieldNames={{
                  label: "com",
                  value: "com_id",
                  children: "children",
                }}
                placeholder=" "
                treeCheckable={true}
                onChange={(newValue) => setCom_ids_par(newValue)}
              />
            </div>
          ) : (
            ""
          )}
          <div className="ipt_box ipt_box_long">
            <div className="ipt_box_title">{t("market.mch_name")}</div>
            <Select
              mode="multiple"
              size="small"
              placeholder=" "
              allowClear={true}
              value={mch_ids_par}
              options={mch_list}
              fieldNames={{
                label: "mch",
                value: "mch_id",
              }}
              onChange={(value) => setMch_ids_par(value)}
              onPopupScroll={(event) => {
                if (mch_list.length < mch_page * 20) {
                  console.log("没有更多商户的筛选数据了");
                  return;
                }
                const target = event.target;
                const residueHeight =
                  target.scrollHeight - target.scrollTop - target.clientHeight;
                if (residueHeight <= 50) {
                  mch_next_page();
                }
              }}
              optionFilterProp="mch"
            ></Select>
          </div>

          <div className="ipt_box ipt_box_long">
            <div className="ipt_box_title">{t("market.project")}</div>
            <Select
              mode="multiple"
              size="small"
              placeholder=" "
              allowClear={true}
              value={project_ids_par}
              options={project_list}
              fieldNames={{
                label: "project",
                value: "project_id",
              }}
              onChange={(value) => setProject_ids_par(value)}
              onPopupScroll={(event) => {
                if (project_list.length < project_page * 20) {
                  console.log("没有更多项目的筛选数据了");
                  return;
                }
                const target = event.target;
                const residueHeight =
                  target.scrollHeight - target.scrollTop - target.clientHeight;
                if (residueHeight <= 50) {
                  project_next_page();
                }
              }}
              optionFilterProp="project"
            ></Select>
          </div>

          <div className="ipt_box ipt_box_long">
            <div className="ipt_box_title">{t("market.point")}</div>
            <Select
              mode="multiple"
              size="small"
              placeholder=" "
              allowClear={true}
              value={point_ids_par}
              options={point_list}
              fieldNames={{
                label: "point",
                value: "point_id",
              }}
              onChange={(value) => setPoint_ids_par(value)}
              onPopupScroll={(event) => {
                if (point_list.length < point_page * 20) {
                  console.log("没有更多点位的筛选数据了");
                  return;
                }
                const target = event.target;
                const residueHeight =
                  target.scrollHeight - target.scrollTop - target.clientHeight;
                if (residueHeight <= 50) {
                  point_next_page();
                }
              }}
              optionFilterProp="point"
            ></Select>
          </div>

          <div className="ipt_box ipt_box_long">
            <div className="ipt_box_title">
              {t("transaction_flow.subject_type")}
            </div>
            <Select
              placeholder=" "
              size="small"
              options={[
                {
                  label: t("system_manager.all"),
                  value: "",
                },
              ]}
              value={subject_type}
              onChange={(value) => setSubject_type(value)}
            />
          </div>

          <div className="ipt_box ipt_box_long">
            <div className="ipt_box_title">
              {t("transaction_flow.subject_status")}
            </div>
            <Select
              placeholder=" "
              size="small"
              value={subject_status}
              onChange={(value) => setSubject_status(value)}
            >
              {order_status_list.map((item) => {
                return (
                  <Option value={item.key} key={item.key}>
                    {text_check(item)}
                  </Option>
                );
              })}
            </Select>
          </div>
          <div className="ipt_box ipt_box_long">
            <div className="ipt_box_title">
              {t("transaction_flow.subject_pay_type")}
            </div>
            <Select
              placeholder=" "
              size="small"
              value={subject_pay_type}
              onChange={(value) => setSubject_pay_type(value)}
            >
              {pay_type_list.map((item) => {
                return (
                  <Option value={item.flag} key={item.flag}>
                    {text_check(item)}
                  </Option>
                );
              })}
            </Select>
          </div>

          <div className="ipt_box ipt_box_long">
            <div className="ipt_box_title">
              <Select
                placeholder=" "
                size="small"
                options={[
                  {
                    label: t("transaction_flow.avm"),
                    value: "avm",
                  },
                  {
                    label: t("transaction_flow.trade_mch_no"),
                    value: "trade_no_mch",
                  },
                  {
                    label: t("transaction_flow.trade_no_pay_new"),
                    value: "trade_no_pay",
                  },
                ]}
                value={screen_ipt_type}
                onChange={(value) => setScreen_ipt_type(value)}
              />
            </div>
            <Input
              placeholder=" "
              value={screen_ipt_value}
              size="small"
              allowClear={true}
              onChange={(e) => setScreen_ipt_value(e.target.value)}
            />
          </div>
          <div className="ipt_box ipt_box_long">
            <div className="ipt_box_title">{t("system_manager.time")}</div>
            <RangePicker
              // picker="month"
              disabledDate={time_disabled}
              size="small"
              onChange={(dates, dateStrings) => setDate_stamp(dateStrings)}
            />
          </div>
        </div>
        <div className="screen_btn">
          <div className="btn_box">
            {/* 添加 */}
            {menu_action.indexOf("m_add") > -1 ? (
              <Button
                size="small"
                type="text"
                icon={<PlusOutlined style={{ color: "#1677FF" }} />}
              >
                {text_check(user_power_lang["m_add"])}
              </Button>
            ) : (
              ""
            )}
            {/* 修改 */}
            {menu_action.indexOf("m_modify") > -1 ? (
              <Button
                size="small"
                type="text"
                icon={<EditOutlined style={{ color: "#1677FF" }} />}
              >
                {text_check(user_power_lang["m_modify"])}
              </Button>
            ) : (
              ""
            )}
            {/* 删除 */}
            {menu_action.indexOf("m_del") > -1 ? (
              <Button
                size="small"
                type="text"
                icon={<DeleteOutlined style={{ color: "#1677FF" }} />}
              >
                {text_check(user_power_lang["m_del"])}
              </Button>
            ) : (
              ""
            )}
            {/* 导出 */}
            {menu_action.indexOf("m_export") > -1 ? (
              <Button
                size="small"
                type="text"
                icon={<DeleteOutlined style={{ color: "#1677FF" }} />}
                onClick={export_data}
              >
                {text_check(user_power_lang["m_export"])}
              </Button>
            ) : (
              ""
            )}
            {/* 关闭订单 */}
            {menu_action.indexOf("m_close") > -1 ? (
              <Button
                size="small"
                type="text"
                icon={<CloseOutlined style={{ color: "#1677FF" }} />}
                onClick={close_order}
              >
                {text_check(user_power_lang["m_close"])}
              </Button>
            ) : (
              ""
            )}
            {/* 补缴 */}
            {menu_action.indexOf("m_supplementary") > -1 ? (
              <Button
                size="small"
                type="text"
                icon={<DollarOutlined style={{ color: "#1677FF" }} />}
                onClick={create_supplementary_payment}
              >
                {text_check(user_power_lang["m_supplementary"])}
              </Button>
            ) : (
              ""
            )}
            {/* 退款 */}
            {menu_action.indexOf("m_useStateund") > -1 ? (
              <Button
                size="small"
                type="text"
                icon={<FileExcelOutlined style={{ color: "#1677FF" }} />}
                onClick={() => refund_payment("whole")}
              >
                {text_check(user_power_lang["m_useStateund"])}
              </Button>
            ) : (
              ""
            )}
            {/* 纠正 */}
            {menu_action.indexOf("m_repair") > -1 ? (
              <Button
                size="small"
                type="text"
                icon={<SyncOutlined style={{ color: "#1677FF" }} />}
                onClick={() => repair_order("whole")}
              >
                {text_check(user_power_lang["m_repair"])}
              </Button>
            ) : (
              ""
            )}
            {/* 撤销补缴订单 */}
            {menu_action.indexOf("m_close_order") > -1 ? (
              <Button
                size="small"
                type="text"
                icon={<SyncOutlined style={{ color: "#1677FF" }} />}
                onClick={revoke_close_order}
              >
                {text_check(user_power_lang["m_close_order"])}
              </Button>
            ) : (
              ""
            )}
            {/* 查询 */}
            {menu_action.indexOf("m_query") > -1 ? (
              <Button
                size="small"
                type="text"
                icon={<SearchOutlined style={{ color: "#1677FF" }} />}
                onClick={search_data}
              >
                {text_check(user_power_lang["m_query"])}
              </Button>
            ) : (
              ""
            )}
          </div>
        </div>
        <div className="table_box">
          <div
            className="page-table"
            style={{
              width: "100vw",
            }}
          >
            <Table
              dataSource={tableList}
              size="small"
              bordered
              columns={columns}
              rowKey="id"
              virtual
              scroll={{
                y: tableHeight,
              }}
              onRow={(record) => {
                return {
                  onClick: () => tableRowClick(record), // 点击行
                };
              }}
              rowClassName={(record, index) => {
                if (record.trade_no_all == clickRowKey) {
                  return "row_clicked_style";
                }
              }}
              rowHoverable={false}
              pagination={{
                defaultCurrent: page,
                defaultPageSize: rows,
                size: "small",
                current: page,
                total: total,
                responsive: true,
                showTotal: (total) =>
                  text_check({
                    msg_cn: `共 ${total} 条`,
                    msg_en: `Total ${total} items`,
                  }),
                onChange: pageOnChange,
              }}
            />
          </div>
        </div>
      </div>
      {/* 导出 */}
      <Modal
        title={t("transaction_flow.export")}
        open={export_data_show}
        onOk={false}
        onCancel={() => setExport_data_show(false)}
        classNames={{ body: "edit_dialog_body", wrapper: "edit_900_style" }}
        maskClosable={false}
        destroyOnClose={true}
      >
        <div className="export_btn">
          <div className="btn_box">
            {/* 添加 */}
            <Button
              size="small"
              type="text"
              icon={<PlusOutlined style={{ color: "#1677FF" }} />}
              onClick={add_export_ranks}
            >
              {text_check(user_power_lang["m_add"])}
            </Button>
            {/* 查询 */}
            <Button
              size="small"
              type="text"
              icon={<SearchOutlined style={{ color: "#1677FF" }} />}
              onClick={get_export_ranks_data}
            >
              {text_check(user_power_lang["m_query"])}
            </Button>
          </div>
        </div>

        <div className="noPage-table" style={{ height: "300px" }}>
          <Table
            dataSource={export_ranks_list}
            size="small"
            bordered
            columns={exportRanksColumns}
            rowKey="id"
            virtual
            scroll={{
              y: 300,
            }}
            rowHoverable={false}
            pagination={false}
          />
        </div>
      </Modal>
      {/* 查看详情 */}
      <Modal
        title={t("transaction_flow.order_details")}
        open={order_detail_show}
        onCancel={() => setOrder_detail_show(false)}
        classNames={{
          body: "edit_dialog_body sale_flow_dialog",
        }}
        maskClosable={false}
        destroyOnClose={true}
        footer={null}
      >
        <>
          {order_detail_msg.box_vm_no && order_detail_msg.box_vm_no !== "" ? (
            <div className="detail_line">
              <div className="detail_line_title">协议货柜号</div>
              <div className="detail_line_content">
                {order_detail_msg.box_vm_no}
              </div>
            </div>
          ) : (
            ""
          )}

          {order_detail_msg.box_aisle_no &&
          order_detail_msg.box_aisle_no !== "" ? (
            <div className="detail_line">
              <div className="detail_line_title">协议货道号</div>
              <div className="detail_line_content">
                {order_detail_msg.box_aisle_no}
              </div>
            </div>
          ) : (
            ""
          )}

          {order_detail_msg.subject_goods_type_name &&
          order_detail_msg.subject_goods_type_name !== "" ? (
            <div className="detail_line">
              <div className="detail_line_title">商品类目</div>
              <div className="detail_line_content">
                {order_detail_msg.subject_goods_type_name}
              </div>
            </div>
          ) : (
            ""
          )}

          {order_detail_msg.subject_barcode &&
          order_detail_msg.subject_barcode !== "" ? (
            <div className="detail_line">
              <div className="detail_line_title">商品编号</div>
              <div className="detail_line_content">
                {order_detail_msg.subject_barcode}
              </div>
            </div>
          ) : (
            ""
          )}

          {order_detail_msg.price_dis_store &&
          order_detail_msg.price_dis_store !== "" ? (
            <div className="detail_line">
              <div className="detail_line_title">设备端优惠金额</div>
              <div className="detail_line_content">
                {order_detail_msg.price_dis_store / 100}
              </div>
            </div>
          ) : (
            ""
          )}

          {order_detail_msg.price_dis_plate &&
          order_detail_msg.price_dis_plate !== "" ? (
            <div className="detail_line">
              <div className="detail_line_title">平台端优惠金额</div>
              <div className="detail_line_content">
                {order_detail_msg.price_dis_plate / 100}
              </div>
            </div>
          ) : (
            ""
          )}

          {order_detail_msg.price_dis_pay &&
          order_detail_msg.price_dis_pay !== "" ? (
            <div className="detail_line">
              <div className="detail_line_title">支付端优惠金额</div>
              <div className="detail_line_content">
                {order_detail_msg.price_dis_pay / 100}
              </div>
            </div>
          ) : (
            ""
          )}

          {order_detail_msg.mch && order_detail_msg.mch !== "" ? (
            <div className="detail_line">
              <div className="detail_line_title">收款商户名称</div>
              <div className="detail_line_content">{order_detail_msg.mch}</div>
            </div>
          ) : (
            ""
          )}

          {order_detail_msg.mch_id && order_detail_msg.mch_id !== "" ? (
            <div className="detail_line">
              <div className="detail_line_title">收款商户编号</div>
              <div className="detail_line_content">
                {order_detail_msg.mch_id}
              </div>
            </div>
          ) : (
            ""
          )}

          {order_detail_msg.mch_id_sub && order_detail_msg.mch_id_sub !== "" ? (
            <div className="detail_line">
              <div className="detail_line_title">收款商户子账号</div>
              <div className="detail_line_content">
                {order_detail_msg.mch_id_sub}
              </div>
            </div>
          ) : (
            ""
          )}

          {order_detail_msg.user_id && order_detail_msg.user_id !== "" ? (
            <div className="detail_line">
              <div className="detail_line_title">消费者标识</div>
              <div className="detail_line_content">
                {order_detail_msg.user_id}
              </div>
            </div>
          ) : (
            ""
          )}
          {order_detail_msg.user_tel && order_detail_msg.user_tel !== "" ? (
            <div className="detail_line">
              <div className="detail_line_title">消费者手机</div>
              <div className="detail_line_content">
                {order_detail_msg.user_tel}
              </div>
            </div>
          ) : (
            ""
          )}

          {order_detail_msg.attach &&
          order_detail_msg.attach.vision_type &&
          order_detail_msg.attach.vision_type !== "" ? (
            <div className="detail_line">
              <div className="detail_line_title">vision_type</div>
              <div className="detail_line_content">
                {order_detail_msg.attach.vision_type}

                {order_detail_msg.attach.vision_type == "cloud_walk" ||
                order_detail_msg.attach.vision_type == "alipay" ||
                order_detail_msg.attach.vision_type == "alipay_m" ? (
                  <Button
                    size="small"
                    style={{ marginLeft: "10px" }}
                    onClick={get_order_video}
                  >
                    查看视频
                  </Button>
                ) : (
                  ""
                )}
              </div>
            </div>
          ) : (
            ""
          )}
        </>
      </Modal>
      {/* 视频 */}
      <Drawer
        title="Mp4"
        placement="top"
        onClose={() => setMp4_video_drawer_show(false)}
        open={mp4_video_drawer_show}
        className="drawer_style"
        styles={{
          content: {
            height: "450px",
          },
          body: {
            height: "400px",
          },
        }}
      >
        <div className="video_box">
          {video_obj["lite_diff_video"] ? (
            <video
              src={video_obj["lite_diff_video"].video_url}
              controls
              width="400px"
              height="200px"
              autoplay={mp4_arr.length == 1}
            >
              您的浏览器不支持 video 标签。
            </video>
          ) : (
            <Button
              type="primary"
              style={{ marginLeft: "10px" }}
              v-else
              onClick={get_order_video}
            >
              捞取
            </Button>
          )}
        </div>
        <div className="video_box">
          {video_obj["lite_main_video"] ? (
            <video
              src={video_obj["lite_main_video"].video_url}
              controls
              width="400px"
              height="200px"
              autoplay={mp4_arr.length == 1}
            >
              您的浏览器不支持 video 标签。
            </video>
          ) : (
            <Button
              type="primary"
              style={{ marginLeft: "10px" }}
              v-else
              onClick={get_order_video}
            >
              捞取
            </Button>
          )}
        </div>
        <div className="video_box">
          {video_obj["lite_minor_video"] ? (
            <video
              src={video_obj["lite_minor_video"].video_url}
              controls
              width="400px"
              height="200px"
              autoplay={mp4_arr.length == 1}
            >
              您的浏览器不支持 video 标签。
            </video>
          ) : (
            <Button
              type="primary"
              style={{ marginLeft: "10px" }}
              v-else
              onClick={get_order_video}
            >
              捞取
            </Button>
          )}
        </div>
      </Drawer>
      <Drawer
        title=" "
        placement="top"
        onClose={() => setM3u8_video_drawer_show(false)}
        open={m3u8_video_drawer_show}
        className="drawer_style"
        styles={{
          content: {
            height: "450px",
          },
          body: {
            height: "400px",
          },
        }}
      >
        {m3u8_arr.map((item) => {
          return (
            <div className="video_box" key={item}>
              <VideoJS
                options={videoJsOptions(item)}
                onReady={handlePlayerReady}
              />
            </div>
          );
        })}
      </Drawer>

      {/* 关闭订单 */}
      <Modal
        title={t("transaction_flow.close_order")}
        open={close_order_show}
        onOk={close_order_confirm}
        onCancel={() => setClose_order_show(false)}
        classNames={{ body: "edit_dialog_body" }}
        maskClosable={false}
        destroyOnClose={true}
      >
        <div className="dialog_ipt_box">
          <div className="ipt_box_title">微信appid</div>
          <Input
            placeholder=" "
            value={close_appid}
            onChange={(e) => setClose_appid(e.target.value)}
          />
        </div>
        <div className="dialog_ipt_box">
          <div className="ipt_box_title">订单号</div>
          <Input
            placeholder=" "
            value={close_out_trade_no}
            onChange={(e) => setClose_out_trade_no(e.target.value)}
          />
        </div>
        <div className="dialog_ipt_box">
          <div className="ipt_box_title">商户号</div>
          <Input
            placeholder=" "
            value={close_merchant_id}
            onChange={(e) => setClose_merchant_id(e.target.value)}
          />
        </div>
      </Modal>

      {/* 创建补缴订单 */}
      <Modal
        title="创建补缴订单"
        open={create_supplementary_payment_show}
        onCancel={() => setCreate_supplementary_payment_show(false)}
        classNames={{
          body: "edit_dialog_body sale_flow_dialog",
          wrapper: "edit_900_style",
        }}
        maskClosable={false}
        destroyOnClose={true}
        footer={[
          <span
            style={{ fontSize: "20px", fontWeight: "600", marginRight: "15px" }}
          >
            总金额:{order_amount}
          </span>,
          <Button type="primary" onClick={create_supplementary_payment_confirm}>
            {t("common.confirm")}
          </Button>,
        ]}
      >
        <div className="product_content">
          <div className="kind_product">
            {avm_kind_product_list.map((item) => {
              return (
                <div
                  className="product_box"
                  key={item.barcode}
                  onClick={() => product_click_func(item)}
                >
                  <div className="product_img">
                    {item.pic && item.pic.length !== 0 ? (
                      <Image
                        className="table_img"
                        src={item.pic}
                        fit="contain"
                        preview={false}
                      />
                    ) : (
                      ""
                    )}
                  </div>
                  <div className="product_name">{item.name}</div>
                  <div className="product_price">¥{item.price}</div>
                </div>
              );
            })}
          </div>
          <div className="checked_box">
            {checked_product_list.map((item, index) => {
              return (
                <div className="product_box" key={item.barcode}>
                  <div className="product_img">
                    {item.pic && item.pic.length !== 0 ? (
                      <Image
                        className="table_img"
                        src={item.pic}
                        fit="contain"
                        preview={false}
                      />
                    ) : (
                      ""
                    )}
                  </div>
                  <div className="product_word">
                    <div className="product_name">{item.name}</div>
                    <div className="product_price">¥{item.price}</div>
                    <div className="product_price">
                      <InputNumber
                        min={1}
                        size="small"
                        defaultValue={item.checked_num ? item.checked_num : 1}
                        onChange={(value) => InputNumberonChange(value, index)}
                      />
                    </div>
                  </div>
                  <div
                    className="close_btn"
                    onClick={() => delete_checked_product(item)}
                  >
                    <CloseOutlined />
                  </div>
                </div>
              );
            })}
          </div>
        </div>
        <div className="dialog_ipt_box">
          <div className="ipt_box_title">补单说明</div>
          <Input
            placeholder=" "
            value={supplementary_payment_notes}
            onChange={(e) => setSupplementary_payment_notes(e.target.value)}
          />
        </div>
      </Modal>

      {/* 更正订单商品 */}
      <Modal
        title="更正订单商品"
        open={repair_order_show}
        onCancel={() => setRepair_order_show(false)}
        classNames={{
          body: "edit_dialog_body sale_flow_dialog",
          wrapper: "edit_900_style",
        }}
        maskClosable={false}
        destroyOnClose={true}
        footer={[
          <span
            style={{ fontSize: "20px", fontWeight: "600", marginRight: "15px" }}
          >
            总金额:{repair_order_amount}
          </span>,
          <Button type="primary" onClick={repair_order_confirm}>
            {t("common.confirm")}
          </Button>,
        ]}
      >
        <div className="product_content">
          <div className="kind_product">
            {repair_avm_kind_product_list.map((item) => {
              return (
                <div
                  className="product_box"
                  key={item.barcode}
                  onClick={() => repair_order_product_click_func(item)}
                >
                  <div className="product_img">
                    {item.pic && item.pic.length !== 0 ? (
                      <Image
                        className="table_img"
                        src={item.pic}
                        fit="contain"
                        preview={false}
                      />
                    ) : (
                      ""
                    )}
                  </div>
                  <div className="product_name">{item.name}</div>
                  <div className="product_price">¥{item.price}</div>
                </div>
              );
            })}
          </div>
          <div className="checked_box">
            {order_checked_product_list.map((item, index) => {
              return (
                <div className="product_box" key={item.barcode}>
                  <div className="product_img">
                    {item.pic && item.pic.length !== 0 ? (
                      <Image
                        className="table_img"
                        src={item.pic}
                        fit="contain"
                        preview={false}
                      />
                    ) : (
                      ""
                    )}
                  </div>
                  <div className="product_word">
                    <div className="product_name">{item.name}</div>
                    <div className="product_price">¥{item.price}</div>
                    <div className="product_price">
                      <InputNumber
                        min={1}
                        size="small"
                        defaultValue={item.checked_num ? item.checked_num : 1}
                        onChange={(value) =>
                          repairOrderInputNumberonChange(value, index)
                        }
                      />
                    </div>
                  </div>
                  <div
                    className="close_btn"
                    onClick={() => repair_delete_checked_product(item)}
                  >
                    <CloseOutlined />
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </Modal>

      {/* 更正订单商品 */}
      <Modal
        title="退款"
        open={refund_payment_show}
        onOk={refund_payment_func}
        onCancel={() => setRefund_payment_show(false)}
        classNames={{
          body: "edit_dialog_body",
        }}
        maskClosable={false}
        destroyOnClose={true}
      >
        <Radio.Group
          options={[
            {
              label: "全部退款",
              value: true,
            },
            {
              label: "此商品退款",
              value: false,
            },
          ]}
          onChange={(e) => setRefund_payment_all_bool(e.target.value)}
          value={refund_payment_all_bool}
        />
      </Modal>
    </>
  );
}
